<template>
  <div class="main-container">
    <div class="latest-recognition">
      <!-- <span>最新识别</span> -->
      <div class="topimg">最新识别</div>
      <div class="content">
        <el-table
          :data="recognition_tableData"
          height="350px"
          class="recognition-table"
        >
          <el-table-column prop="username" label="地点" width="180" />
          <el-table-column prop="createTime" label="上传时间" width="180" />
          <el-table-column prop="recognitionResult" label="识别结果" />
          <el-table-column prop="confidence" label="识别置信度" />
        </el-table>
      </div>
    </div>
  </div>
</template>



<script setup>
import { fishWeightApi } from "@/api/fishWeight";
import { ref, onMounted } from "vue";

const recognition_tableData = ref([]);

const getLatestRecords = async () => {
  try {
    const response = await fishWeightApi.getLatestRecord();
    recognition_tableData.value = response.data;
  } catch (error) {
    console.error("获取最新识别记录失败:", error);
  }
};

onMounted(() => {
  getLatestRecords();
});
</script>


<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.latest-recognition {
  width: 100%;
  height: 100%;
}

.latest-recognition span {
  font-size: 20px;
  font-weight: 700;
  color: whitesmoke;
}
.content {
  width: 98%;
  padding: 0 1%;
  margin-top: 2%;
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
  /* border: 1px solid rgba(255, 255, 255, 0.5); */
}

/* 
element plus组件的样式需要使用深度选择器进行选中，
否则会收到 <style scoped> 的覆盖
 */
:deep(.recognition-table) {
  background: transparent !important; /* 让表格背景透明 */
  color: #fff !important;
  border: none !important;
}
:deep(.recognition-table .el-table__cell) {
  text-align: center;
  font-size: 16px; /* 增大字体 */
  padding: 12px 0 !important; /* 增加单元格内边距 */
}

:deep(.recognition-table .el-table__header tr) {
  background: rgba(0,0,0,0.1) !important;
}

:deep(.recognition-table .el-table__header th) {
  background: transparent !important; /* 让单元格背景透明，以显示 tr 的渐变 */
  border: none !important;
  color: #fff !important;
  font-size: larger;
  font-weight: bold;
  padding: 15px 0 !important; /* 增加表头内边距 */
}

:deep(.recognition-table .el-table__body tbody tr) {
  background: transparent !important; /* 让单元格背景透明，以显示 tr 的渐变 */
  border: none !important;
}

:deep(.recognition-table .el-table__body tr:hover > td) {
  background-color: #243062 !important; /* 鼠标悬浮颜色 */
}

/* 移除所有表格边框 */
:deep(.recognition-table td),
:deep(.recognition-table th.el-table__cell) {
  border: none !important;
}

:deep(.recognition-table::before),
:deep(.recognition-table::after) {
  display: none !important;
}

:deep(.recognition-table .el-table__inner-wrapper),
:deep(.recognition-table .el-table__header-wrapper),
:deep(.recognition-table .el-table__body-wrapper) {
  border: none !important;
}

:deep(.recognition-table .el-table__border-left-patch),
:deep(.recognition-table .el-table__border-right-patch) {
  display: none !important;
}

:deep(.el-table__inner-wrapper::before){
  display: none;
}

.topimg{
  font-size: 24px;
  height: 40px;
  background-image: url(@/assets/top.png);
  background-size: cover;
  text-align: center;
}
</style>